<!--
 * @Author: DUST
 * @Date: 2023-05-19 13:36:58
 * @LastEditors: DUST
 * @LastEditTime: 2023-06-17 19:55:37
 * @FilePath: \vite-project\src\components\browseHeander.vue
 * @Description: 
 * undefined
-->
<template>
  <div class="browseHeander">
    <div class="browseHeanderLeft">
      <img @click="showMenu" src="@/assets/logo1.png" class="logoIcon" alt="" />
      <div class="heartTitle">一个标题</div>
    </div>
    <div class="browseHeanderCenter"></div>
    <div class="browseHeanderRight">
      <template v-if="weatherInfo">
        <div class="location">
          <span>
            您的位置：{{
              (weatherInfo?.province || "") + " " + (weatherInfo?.city || "")
            }}
          </span>
        </div>
        <div class="IP">
          <span>IP：{{ IPInfo?.text || "" }}</span>
        </div>
        <div class="weather">
          <span>天气：</span>
          <span>{{ weatherInfo?.weather || "" }}</span>
          <span>{{ " / " + weatherInfo?.temperature + "℃" || "" }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
import { onMounted, onUnmounted, ref } from "vue";
import emitter from "@/eventBus";
import { locationAndWeather } from "@/api/forceEnd";
import { AxiosResponse } from "axios";
import { Ajax } from "../interface";

const collapsed = ref(false);
interface WeatherInfo {
  weather?: string;
  temperature?: string;
  province?: string;
  city?: string;
}
interface IPInfoInterface {
  text?: string;
}
interface AjaxData {
  lives: Array<WeatherInfo>;
  ipinfo: IPInfoInterface;
  [other: string]: any;
}
// 天气信息
const weatherInfo = ref<WeatherInfo>();
const IPInfo = ref<IPInfoInterface>();

const getLocationAndWeather = () => {
  locationAndWeather().then((res: AxiosResponse<Ajax<AjaxData>>) => {
    const data = res.data.data;
    if (data.lives.length > 0) weatherInfo.value = data.lives[0];
    IPInfo.value = data.ipinfo;
  });
};

onMounted(() => {
  //事件总线来接收
  emitter.on("showMenu", (res) => {
    collapsed.value = res as boolean;
  });
  getLocationAndWeather();
});

onUnmounted(() => {
  // 结束事件
  emitter.off("showMenu", () => ({}));
});

const showMenu = () => {
  emitter.emit("showMenu", true);
};
</script>

<style lang="less" scoped>
.browseHeander {
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.9);
  // border-bottom: 2px solid rgba(85, 152, 253, 0.9);
  .changeMenuIcon,
  .heartTitle {
    font-size: 26px;
    color: #fff;
  }
  .browseHeanderLeft {
    display: flex;
    flex-direction: row;
    align-items: center;
    .logoIcon {
      width: 42.8px;
      height: 38.6px;
      margin-right: 15px;
      cursor: pointer;
    }
    .heartTitle {
      font-size: 20px;
    }
  }
  .browseHeanderCenter {
    min-width: 1200px;
  }
  .browseHeanderRight {
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    .location,
    .IP {
      padding-right: 10px;
      box-sizing: border-box;
    }
  }
}
</style>
